<template>
  <div class="my-skills-container">
    <div class="module-title-container">
      <div class="module-title">我的技能</div>
      <div class="module-subtitle">
        快招我！亲爱的老板，你会获得一个"全干工程师"！
      </div>
    </div>
    <div class="skills-container">
      <div class="skill-menu-container">
        <div
          class="skill-menu-item"
          v-for="(skill, index) in skillMenuList"
          :key="skill"
          :class="{ active: activeTabIndex === index }"
          @click="handleSelectTab(index)"
        >
          {{ skill }}
        </div>
      </div>
      <div class="skill-info-wrapper">
        <div
          class="skill-info"
          v-for="(item, index) in skillInfoList[activeTabIndex]"
          :key="item.title"
          :style="{ '--delay': `${index * 0.2}s` }"
        >
          <div class="skill-info-icon">
            <img :src="item.icon" alt="" />
          </div>
          <div class="skill-info-content">
            <div class="skill-info-title">
              {{ item.title }}
              <a-tag v-if="item.tag" :color="item.tagColor">{{
                item.tag
              }}</a-tag>
            </div>
            <div class="skill-info-desc" v-html="item.desc"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// ------------ imports ------------
import { ref, nextTick, reactive, onMounted } from "vue";
// ---- 详情icon ----
import vueIcon from "~/assets/icons/vue.svg";
import reactIcon from "~/assets/icons/react.svg";
import chromeIcon from "~/assets/icons/chrome.svg";
import tsIcon from "~/assets/icons/ts.svg";
import jsIcon from "~/assets/icons/js.svg";
import cssIcon from "~/assets/icons/css.svg";
import javaIcon from "~/assets/icons/java.svg";
import pythonIcon from "~/assets/icons/python.svg";
import springAiIcon from "~/assets/icons/spring-ai.svg";
import cozeIcon from "~/assets/icons/coze.svg";
import difyIcon from "~/assets/icons/dify.svg";
import maxkbIcon from "~/assets/icons/maxkb.png";
import ollamaIcon from "~/assets/icons/ollama.png";
import modaoIcon from "~/assets/icons/modao.svg";
import miaoduoIcon from "~/assets/icons/miaoduo.svg";
import feishuIcon from "~/assets/icons/feishu.png";
import photoshopIcon from "~/assets/icons/photoshop.svg";
import githubIcon from "~/assets/icons/github.svg";
import dockerIcon from "~/assets/icons/docker.svg";
// ------------ data ------------
const skillMenuList = ref([
  "前端开发",
  "后端开发",
  "大模型应用开发",
  "产品设计",
  "其他技能",
]);

// 当前选中的tab索引
const activeTabIndex = ref(0);

const skillInfoList = reactive([
  [
    {
      icon: vueIcon,
      title: "Vue",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟练使用Vue2/Vue3。</li>
      <li>熟练使用Vue Router、Vuex/Pinia状态管理，具备组件化开发经验。</li>
      <li>熟练使用Nuxt.js框架。</li>
      <li>熟练使用 ECharts 进行数据可视化开发，可实现折线图、柱状图、饼图等多种图表展示，支持数据动态更新和交互效果。</li>
      <li>精通Element UI、Ant DesignUl框架。</li>
    `,
    },
    {
      icon: reactIcon,
      title: "React",
      tag: "掌握",
      tagColor: "success",
      desc: `<p>掌握使用React和TSX，掌握Next.js框架，可用Next.js开发SEO的友好的网站。<p>`,
    },
    {
      icon: chromeIcon,
      title: "Chrome浏览器插件开发",
      tag: "掌握",
      tagColor: "success",
      desc: `
      <li>掌握使用Chrome浏览器插件开发，掌握插件生命周期、事件处理、DOM操作等。</li>
      <li>熟悉Chrome插件API，能够实现自定义功能和扩展浏览器功能。</li>
    `,
    },
    {
      icon: tsIcon,
      title: "TypeScript",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟练使用TypeScript，掌握类型检查、接口、泛型等特性。</li>
      <li>熟练使用ESLint规范开发，确保代码风格统一且符合最佳实践。</li>
    `,
    },
    {
      icon: jsIcon,
      title: "JavaScript",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>精通HTML5、CSS3、JavaScript原生开发。</li>
      <li>熟悉DOM操作、事件处理、异步编程等。</li>
    `,
    },
    {
      icon: cssIcon,
      title: "CSS",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>掌握Less/Sass预处理器,实现模块化样式管理与主题定制,熟练开发响应式设计界面。</li>
      <li>熟悉Flexbox、Grid布局，能够实现响应式设计。</li>
    `,
    },
  ],
  [
    {
      icon: javaIcon,
      title: "Java",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟练使用SpringBoot框架开发，熟练使用MyBatisPlus进行RESTfulAPl设计。</li>
      <li>熟练掌握关系型数据库MySQL，熟悉使用Redis存储热点数据。</li>
    `,
    },
    {
      icon: pythonIcon,
      title: "Python",
      tag: "掌握",
      tagColor: "success",
      desc: `
      <li>掌握使用Python进行后端开发，熟悉Flask轻量级后端框架。</li>
      <li>掌握 Python 爬虫框架BeautifulSoup，能够从各类网站抓取数据。</li>
      <li>熟练使用 Pandas、NumPy 进行数据分析和处理，使用 Matplotlib、Echarts 进行数据可视化。</li>
      <li>熟悉数据库设计与SQL语句，能够进行数据库开发。</li>
    `,
    },
  ],
  [
    {
      icon: springAiIcon,
      title: "Spring AI",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟悉使用Spring AI框架，能够集成大模型应用。</li>
      <li>熟悉使用DeepSeek等大模型API，能够进行文本生成、文本分类等任务。</li>
      <li>熟悉使用DeepSeek等大模型API，能够进行文本生成、文本分类等任务。</li>
      <li>已有落地投产产品：简历解析、简历筛选、智能客服等</li>
    `,
    },
    {
      icon: cozeIcon,
      title: "Coze",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟悉使用Coze平台，能够进行大模型应用开发。</li>
      <li>已有落地投产产品：代填表单、智能客服等</li>
    `,
    },
    {
      icon: difyIcon,
      title: "Dify",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟悉使用Dify平台，能够进行大模型应用开发。</li>
      <li>已有落地投产产品：期权指令机器人、互换下单模型、财报撰写模型等</li>
    `,
    },
    {
      icon: maxkbIcon,
      title: "MaxKB",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟悉使用MaxKB平台，能够进行大模型应用开发。</li>
      <li>已有落地投产产品：智能客服</li>
    `,
    },
    {
      icon: ollamaIcon,
      title: "Ollama",
      tag: "掌握",
      tagColor: "success",
      desc: `
      <p>熟悉使用Ollama平台，能够进行大模型本地化部署。</p>
    `,
    },
  ],
  [
    {
      icon: modaoIcon,
      title: "墨刀",
      tag: "掌握",
      tagColor: "success",
      desc: `
      <li>熟悉使用墨刀平台，能够进行产品设计。</li>
      <li>已有设计落地投产产品：《捉友——AI桌游平台小程序》</li>
    `,
    },
    {
      icon: miaoduoIcon,
      title: "妙多",
      tag: "掌握",
      tagColor: "success",
      desc: `
      <li>熟悉使用妙多平台，能够进行产品设计。</li>
      <li>已有落地投产产品：《德科智能招聘浏览器插件》</li>
    `,
    },
  ],
  [
    {
      icon: githubIcon,
      title: "GitHub",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <p>熟练使用GitHub、Gitee平台，能够进行代码管理。</p>
    `,
    },
    {
      icon: dockerIcon,
      title: "Docker",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟练使用Docker平台，能够进行容器化部署。</li>
      <li>可以部署 Node.js、Java、Python 等应用</li>
    `,
    },
    {
      icon: feishuIcon,
      title: "飞书",
      tag: "熟练",
      tagColor: "processing",
      desc: `
      <li>熟练使用飞书平台，能够进行产品设计，如绘制原型图、设计交互流程等。</li>
      <li>掌握飞书多维表格、知识库等工具，可用于项目管理、文档协作。</li>
      <li>了解飞书机器人开发，能定制自动化流程提高工作效率。</li>
    `,
    },
    {
      icon: photoshopIcon,
      title: "Photoshop",
      tag: "掌握",
      tagColor: "success",
      desc: `
      <p>熟悉使用Photoshop软件，能够进行图片编辑、设计等。</p>
    `,
    },
  ],
]);

// ------------ methods ------------
// 选择tab的函数
const handleSelectTab = (index) => {
  activeTabIndex.value = index;
  
  // 重置动画效果
  nextTick(() => {
    const skillElements = document.querySelectorAll('.skill-info');
    skillElements.forEach((el, i) => {
      // 移除动画类
      el.style.animation = 'none';
      // 设置延迟
      el.style.setProperty('--delay', `${i * 0.2}s`);
      // 触发重排
      void el.offsetWidth;
      // 重新添加动画
      el.style.animation = null;
    });
  });
};

// 设置Intersection Observer，实现进入视窗时播放动画
onMounted(() => {
  // 创建Intersection Observer实例
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 当元素进入视窗时，添加动画类
        entry.target.classList.add('animate-in');
        
        // 确保每个技能卡片都有正确的延迟
        const skillElements = entry.target.querySelectorAll('.skill-info');
        skillElements.forEach((el, i) => {
          // 设置延迟
          el.style.setProperty('--delay', `${i * 0.2}s`);
        });
      } else {
        // 当元素离开视窗时，移除动画类，以便下次进入时可以再次播放
        entry.target.classList.remove('animate-in');
      }
    });
  }, {
    threshold: 0.1 // 当10%的元素可见时触发
  });

  // 观察技能卡片容器
  setTimeout(() => {
    const skillWrapper = document.querySelector('.skill-info-wrapper');
    if (skillWrapper) {
      observer.observe(skillWrapper);
    }
  }, 100); // 延迟100ms确保DOM已完全渲染
});
</script>

<style lang="scss">
.my-skills-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 0 100px;
  padding-top: 100px;
  padding-bottom: 100px;

  .skills-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: 100%;

    .skill-menu-container {
      display: flex;
      align-items: center;
      gap: 20px;
      width: 100%;
      height: 100%;
      margin: 20px 0;

      .skill-menu-item {
        display: flex;
        flex-direction: column;
        width: 300px;
        gap: 10px;
        transition: all 0.3s ease-in-out;
        text-align: center;
        color: #666;
        cursor: pointer;
        padding: 10px 0;
        border-bottom: 2px solid transparent;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          bottom: -2px;
          left: 50%;
          width: 30px;
          height: 2px;
          background-color: #165dff;
          transform: translateX(-50%) scaleX(0);
          transition: transform 0.3s ease-in-out;
        }

        &.active {
          color: #165dff;
          font-weight: bold;

          &::after {
            transform: translateX(-50%) scaleX(1);
          }
        }

        &:hover {
          color: #165dff;
        }
      }
    }

    .skill-info-wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      height: 100%;
      min-height: max-content;

      &:hover .skill-info:not(:hover) .skill-info-icon {
        filter: grayscale(0.9);
      }

      .skill-info {
        display: flex;
        flex-direction: row;
        gap: 40px;
        transition: all 0.3s ease-in-out;
        border-bottom: solid 1px #ececec;
        padding-bottom: 20px;
        opacity: 0;
        transform: translateY(20px);
        // 移除自动播放的动画
        // animation: floatIn 0.6s ease-out forwards;
        // animation-delay: var(--delay, 0s);

        &:hover {
          .skill-info-icon {
            filter: grayscale(0);
          }
        }

        &-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 100px;
          filter: grayscale(0);
          transition: all 0.3s ease-in-out;

          img {
            width: 100%;
            height: 100%;
          }
        }

        &-content {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 100%;
          height: 100%;
          padding: 10px 0;

          .skill-info-title {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-family: "SourceHanSansCN-bold", sans-serif;
            color: #1d2129;
          }

          .skill-info-desc {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: pre-wrap;

            li {
              margin: 0;
              margin-left: 20px;
            }
          }
        }
      }
      
      // 当元素进入视窗时添加的动画类
      &.animate-in {
        .skill-info {
          animation: floatIn 0.6s ease-out forwards;
          animation-delay: var(--delay, 0s);
        }
      }
    }
  }
}

@keyframes floatIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
